<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>作业</title>
  <link rel="icon" href="https://static2.cnodejs.org/public/images/cnode_icon_32.png" type="image/x-icon">
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: #e1e1e1;
      color: #333;
      font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, sans-serif !important;
    }

    .clear:after {
      content: '';
      display: block;
      clear: both;
    }

    .span3 {
      width: 206px;
    }

    a {
      text-decoration: none;
    }

    dd,
    dt,
    li {
      line-height: 20px;
    }

    li {
      display: list-item;
      text-align: -webkit-match-parent;
    }

    ul {
      display: block;
      list-style-type: none;
    }

    @keyframes ni {
      from {
        background-color: #ccc;
      }

      to {
        background-color: #fff;
      }
    }

    .navbar {
      z-index: 9;
      width: 100%;
      background: #444;
      font-size: 13px;
      margin-bottom: 10px;
    }

    .navbar-inner {
      width: 90%;
      margin: auto;
      padding: 5px;
    }

    .navbar .container {
      width: 100%;
      min-width: 500px;
      margin: 0 auto;
      max-width: 1400px;
      position: relative;
    }

    .navbar .brand {
      display: block;
      float: left;
      width: 120px;
      padding: 3px 20px;
      height: 34px;
      line-height: 34px;
      color: #ccc;
      font-weight: 700;
    }

    .navbar .navbar-search {
      margin-top: 6px;
      float: left;
      position: relative;
      display: block;
    }

    .navbar .search-query {
      background: url(https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png) 4px 4px no-repeat #888;
      padding: 3px 5px 3px 22px;
      color: #666;
      margin-top: 2px;
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      border-radius: 15px;
    }

    .navbar .search-query:hover {
      animation: ni 1.5s;
      animation-fill-mode: forwards;
    }

    .navbar .nav {
      position: absolute;
      right: 0;
      display: block;
      margin: 0 10px 0 0;
      list-style: none;
    }

    .navbar .nav>li {
      float: left;
      padding: 10px;
    }

    .navbar .nav>li a {
      color: #ccc;
    }

    .navbar .nav>li a:hover {
      color: #fff;
    }

    /* main */
    .topic-tab {
      margin: 0 10px;
      color: #80bd01;
    }

    .current-tab {
      background-color: #80bd01;
      color: #fff;
      padding: 3px 4px;
      border-radius: 3px;
    }

    .main {
      margin-bottom: 10px;
      width: 100%;
    }

    .content {
      width: 90%;
      margin: 0 auto;
    }

    .panel {
      width: 70%;
      float: left;
    }

    .panel .header {
      width: 100%;
      padding: 10px;
      background-color: #f6f6f6;
      border-radius: 3px 3px 0 0;
    }

    .panel .header a {
      font-size: 14px;
    }

    .panel .header a:link {
      cursor: pointer;
    }

    .panel .header a:focus,
    a:hover {
      color: #005580;
      outline: 0;
    }

    .panel .header a.current-tab:focus,
    a.current-tab:hover {
      color: #fff;
    }

    .panel .cell {
      padding: 10px;
      background: #fff;
      border-top: 1px solid #f0f0f0;
      width: 100%;
    }

    .panel .cell:nth-child(1) {
      border-top: none;
    }

    .cell .leftPart {
      float: left;
    }

    .cell .rightPart {
      float: right;

    }

    .cell .leftList li {
      height: 30px;
      line-height: 30px;
      float: left;
    }

    .cell .rightList li {
      float: right;
      height: 30px;
      line-height: 30px;
    }

    img.user_avatar {
      width: 30px;
      height: 30px;
    }

    .cell .reply_count {
      width: 70px;
      display: inline-block;
      text-align: center;
    }

    .cell .reply_count .count_of_replies {
      font-size: 14px;
      color: #9e78c0;
    }

    .cell .reply_count .count_seperator {
      margin: 0 -3px;
      font-size: 12px;
      color: #b4b4b4;
    }

    .cell .reply_count .count_of_visits {
      font-size: 12px;
      color: #b4b4b4;
    }

    .cell .put_top {
      background: #80bd01;
      padding: 2px 4px;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
    }

    .put_top {
      margin-right: 3px;
    }

    a.topic_title {
      color: #333;
      max-width: 70%;
      -o-text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      line-height: 30px;
    }

    img.user_small_avatar {
      width: 18px;
      height: 18px;
    }

    span.last_active_time {
      text-align: right;
      min-width: 50px;
      display: inline-block;
      white-space: nowrap;
      font-size: 12px;
      color: #778087;
    }

    .pagination {
      background: #fff;
      border-top: 1px solid #f0f0f0;
      width: 100%;
      padding: 10px;
    }

    .pagination ul li a {
      display: block;
      float: left;
      padding: 4px 12px;
      line-height: 20px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-left-width: 0;
      color: #778087;
      font-size: 12px;
    }

    .pagination ul li a.bound {
      border-radius: 3px;
    }

    /* sidebar */
    .sidebar {
      width: 25%;
      float: right;
    }

    .board {
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      color: #333;
      background-color: #fff;
      border-radius: 0 0 3px 3px;
      margin-bottom: 10px;
    }

    .inner {
      padding: 10px;
    }

    .inner p {
      margin: 7px 0 10px;
    }

    .inner a {
      color: #778087;
    }

    @-webkit-keyframes bc {
      from {
        background-color: #5bc0de;
      }

      to {
        background-color: #08c;
      }
    }

    .span-info {
      margin-top: 5px;
      display: block;
      width: 48%;
      padding: 3px 10px;
      cursor: pointer;
      letter-spacing: 2px;
      box-shadow: none;
      border-radius: 3px;
      line-height: 2em;
      vertical-align: middle;
      color: #fff;
      background-color: #5bc0de;
    }

    .span-info:hover,
    .span-info:active {
      animation: bc 1.5s;
      animation-fill-mode: forwards;
    }

    .bhead {
      color: #444;
      background-color: #f6f6f6;
      padding: 10px;
    }

    .bbody {
      padding: 10px;
    }

    .bbody .message a {
      display: block;
      color: #778087;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 30px;
    }

    .bbody .user_name a {
      color: #778087;
    }

    .top_score,
    .user_name {
      color: #778087;
      font-size: 12px;
      margin-right: 5px;
      line-height: 30px;
    }

    .friend_community img {
      width: 150px;
      height: 50px;
      margin-bottom: 5px;
    }

    .qr {
      text-align: center;
      vertical-align: middle;
    }

    .qr img {
      width: 200px;
    }

    .footer {
      width: 100%;
      background-color: #fff;
      font-size: 14px;
      padding: 20px 0;
    }

    .qr a {
      color: #778087;
    }

    .footer_main {
      width: 90%;
      max-width: 1400px;
      min-width: 500px;
      margin: 0 auto;
      color: #ababab;
      line-height: 2em;
    }

    a.dark,
    a.dark:active,
    a.dark:link,
    a.dark:visited {
      color: #666;
      text-decoration: none;
    }

    .footer_main .col_fade a {
      color: #08c;
      text-decoration: none;
      vertical-align: bottom;
    }

    .topic-tab {
      display: inline-block;
      cursor: pointer;
    }

    .lists .list {
      display: none;
    }
  </style>
</head>

<body>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container clear">
        <a href="/" class="brand">
          <img src="https://static2.cnodejs.org/public/images/cnodejs_light.svg">
        </a>
        <form id="search_form" class="navbar-search" action="/search">
          <input type="text" id="q" name="q" class="search-query span3" value="">
        </form>
        <ul class="nav pull-right">
          <li><a href="/">首页</a></li>
          <li><a href="/getstart">新手入门</a></li>
          <li><a href="/api">API</a></li>
          <li><a href="/about" target="">关于</a></li>
          <li><a href="/signup">注册</a></li>
          <li><a href="/signin">登录</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="content clear">
      <div class="panel">
        <div class="header">
          <div class="topic-tab current-tab">全部</div>
          <div class="topic-tab ">精华</div>
          <div class="topic-tab ">分享</div>
          <div class="topic-tab ">问答</div>
          <div class="topic-tab ">招聘</div>
          <div class="topic-tab ">客户端测试</div>
        </div>
        <div class="lists">
          <div class="list" style="display:block;">
            全部列表
            <div class="item">内容1</div>
          </div>
          <div class="list">
            精华列表
            <div class="item">内容1</div>
          </div>
          <div class="list">
            分享列表
            <div class="item">内容1</div>
          </div>
          <div class="list">
            分享列表
            <div class="item">内容1</div>
          </div>
          <div class="list">
            问答列表
            <div class="item">内容1</div>
          </div>
          <div class="list">
            招聘列表
            <div class="item">内容1</div>
          </div>
          <div class="list">
            客户端测试列表
            <div class="item">内容1</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>

    const doms = document.getElementsByClassName('topic-tab')

    const listDoms = document.getElementsByClassName('list')

    for (let index = 0; index <= doms.length - 1; index++) {
      doms[index].addEventListener('click', function () {
        for (let j = 0; j <= doms.length - 1; j++) {
          doms[j].className = 'topic-tab'
          listDoms[j].style.display = 'none'
        }
        this.className = 'topic-tab current-tab'
        listDoms[index].style.display = 'block'
      })
    }

  </script>
</body>

</html>